<template>
  <PageContainer>
    <Header title="会员中心">
      <view style="padding: 8rpx 32rpx">
        <UniSearchBar
          placeholder="请输入搜索内容"
          :radius="32"
          @confirm="searchConfirm"
          @cancel="restFnc"
          @clear="restFnc"
        />
      </view>
    </Header>
    <view style="box-sizing: border-box">
      <Paglist v-model="dataList" :parame="parame" :is-init-api="false" @register="register">
        <GoodsVertical :list="dataList" />
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* moreMemberWelfareProduct 更多会员福利产品 */
  import { shopLevelProductList } from '@/api/mall';
  import type { ProductItem } from '@/api/mall/types';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { onLoad } from '@/router';
  import { onPageScroll } from '@dcloudio/uni-app';
  import { provide, reactive, ref } from 'vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import GoodsVertical from '../../components/PublicGoodsItem/GoodsVertical.vue';

  const parame = reactive({
    keyWord: '',
    levelDataId: 0,
  });
  const dataList = ref<ProductItem[]>([]);
  provide('api', shopLevelProductList);
  const [register, { refresh }] = useConList();
  onPageScroll(() => {});

  onLoad<'moreMemberWelfareProduct'>((op) => {
    parame.levelDataId = op.levelDataId;
    refresh();
  });

  function restFnc() {
    searchConfirm({ value: '' });
  }

  function searchConfirm(e: { value: string }) {
    if (parame.keyWord === e.value) return;
    dataList.value = [];
    parame.keyWord = e.value;
    refresh();
  }
</script>
